<template>
  <div class="myspace">
    <!-- 返回 -->
        <div class="header" @click="$router.go(-1)">
                <svg t="1667886439207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8825" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="8826" fill="#8a8a8a"></path></svg>
        </div>

        <!-- 信息 -->
        <div class="msg">
            <div class="userpc">
                <img src="../assets/imgs/个人头像.jpg" alt="">
            </div>
            <div class="username">
                林凯琦28
            </div>
            <router-link tag="div" to="/login" class="other">
                <svg t="1667887801042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11886" width="200" height="200"><path d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.8 0.1 220 179 398.9 398.9 398.9 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m218.3 489v1.7c0 0.5-0.1 1-0.1 1.6 0 0.3 0 0.6-0.1 0.9 0 0.5-0.1 1-0.2 1.5 0 0.3-0.1 0.7-0.1 1-0.1 0.4-0.1 0.8-0.2 1.2-0.1 0.4-0.2 0.9-0.2 1.3-0.1 0.3-0.1 0.6-0.2 0.8-0.1 0.6-0.3 1.2-0.4 1.8 0 0.1-0.1 0.2-0.1 0.3-2.2 8.5-6.6 16.6-13.3 23.3L600.7 755.4c-20 20-52.7 20-72.6 0-20-20-20-52.7 0-72.6l28.9-28.9H347c-28.3 0-51.4-23.1-51.4-51.4 0-28.3 23.1-51.4 51.4-51.4h334c13.2 0 26.4 5 36.4 15s15 23.2 15 36.4c0 0.3-0.1 0.6-0.1 0.8z m0.1-179.5c0 28.3-23.1 51.4-51.4 51.4H347c-13.2 0-26.4-5-36.4-15s-15-23.2-15-36.4v-0.8-1.6c0-0.5 0.1-1.1 0.1-1.6 0-0.3 0-0.6 0.1-0.9 0-0.5 0.1-1 0.2-1.5 0-0.3 0.1-0.7 0.1-1 0.1-0.4 0.1-0.8 0.2-1.2 0.1-0.4 0.2-0.9 0.2-1.3 0.1-0.3 0.1-0.6 0.2-0.8 0.1-0.6 0.3-1.2 0.4-1.8 0-0.1 0.1-0.2 0.1-0.3 2.2-8.5 6.6-16.6 13.3-23.3l116.6-116.6c20-20 52.7-20 72.6 0 20 20 20 52.7 0 72.6L471 372.5h210c28.2 0 51.4 23.1 51.4 51.3z" p-id="11887" fill="#FF4400"></path></svg>
            </router-link>
            <!-- 充钱 -->
            <div class="kkb">
                <router-link tag="div" :to="'/pay?id='+kkb" class="one">
                    <svg t="1667886991528" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9842" width="200" height="200"><path d="M853.333333 640v170.666667H128V256h725.333333v170.666667h42.666667v213.333333h-42.666667z m0-170.666667h-149.333333c-34.133333 0-64 29.866667-64 64s29.866667 64 64 64H853.333333v-128z m-42.666666-42.666666V298.666667H170.666667v469.333333h640v-128h-106.666667c-59.733333 0-106.666667-46.933333-106.666667-106.666667s46.933333-106.666667 106.666667-106.666666H810.666667z" fill="#2c2c2c" p-id="9843"></path></svg>
                    {{kkb}}KK币
                </router-link>
                <div class="two">
                    <svg t="1667887016141" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10968" width="200" height="200"><path d="M983.320548 854.268493H42.082192c-19.638356 0-35.068493-15.430137-35.068493-35.068493V446.071233c0-11.221918 5.610959-21.041096 14.027397-28.054795s19.638356-8.416438 30.860274-5.610959L266.520548 474.126027l218.827397-286.158904c7.013699-8.416438 16.832877-14.027397 26.652055-14.027397 11.221918 0 21.041096 4.208219 28.054795 12.624658l238.465753 287.561643 194.980822-61.720548c11.221918-2.805479 22.443836-1.40274 30.860274 5.610959 8.416438 7.013699 14.027397 16.832877 14.027397 28.054795v373.128767c0 19.638356-15.430137 35.068493-35.068493 35.068493z m-906.169863-70.136986h871.10137V493.764384l-171.134247 54.706849c-14.027397 4.208219-28.054795 0-37.873972-11.221918L513.40274 265.117808 307.2 535.846575c-8.416438 11.221918-23.846575 16.832877-37.873973 12.624658l-192.175342-56.109589v291.769863z" p-id="10969"></path></svg>
                    会员中心
                </div>
            </div>
        </div>
        <!-- 阅读历史 -->
        <div class="readed">
            <div :class="['his',nage?'con':'']" @click="history">阅读历史</div>
            <div :class="['watch',nage?'':'con']" @click="guanzhu">我的关注</div>

           
        </div>


        <!-- 历史盒子 -->
         <div class="hisbox" v-if="nage == true">
                <router-link tag="div" :to="'/show?id='+item.id" class="item" v-for="(item,index) in histtt" :key="index">
                    <div class="imgs">
                        <img :src="item.fmimg" alt="">
                    </div>
                    <div class="wenzi">
                        {{item.fmname}}
                    </div>
                    <div class="under">
                        1话/{{item.all}}话
                    </div>
                </router-link>
        </div>

        <!-- 关注盒子 -->
        <div class="guanzhu" v-if="nage == false">
                <router-link tag="div" :to="'/show?id='+item.id" class="item" v-for="(item,index) in guanzhulists" :key="index">
                    <div class="imgs">
                        <img :src="item.showimg" alt="">
                        <div class="none">暂无没有更新</div>
                    </div>
                    <div class="name">
                        {{item.fmname}}
                    </div>
                </router-link >
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            kkb:"0",
            nage:true,
            guanzhulists:[],
            histtt:[]
        }
    },
    methods:{
        history(){
            // console.log("111")
            this.nage = true
        },
        guanzhu(){
            // console.log("222")
            this.nage = false
        }
    },
    created(){
        this.histtt = JSON.parse(window.localStorage.getItem("histtt"))

        if(window.localStorage.getItem("kkb") == 0){
            this.kkb = 0
        }else{
            this.kkb = window.localStorage.getItem("kkb")
        }


        //关注
        if(window.localStorage.getItem("guanzhu")){//如果本地历史数组不为空，历史数组等于本地历史数组
          this.guanzhulists = JSON.parse(window.localStorage.getItem("guanzhu"))
        }else{//否则为空
          this.guanzhulists = []
        }
        console.log(this.guanzhulists)


    }
}
</script>

<style lang="scss">
.myspace .guanzhu{
    width: 90%;
    margin: 20px auto 0;
    
    .item{
        width: 100%;
        border-bottom: 2px solid #fde23d;
        .imgs{
            width: 100%;
            position: relative;
            img{
                width: 100%;
            }
            .none{
                position: absolute;
                right: 0px;
                bottom: 0px;
                color: #fff;
                font-size: 16px;
                font-weight: 600;
            }
        }
    }
}
.myspace .hisbox{

        width: 90%;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
        .item{
            width: 30%;
            margin: 0 1%;
            .imgs{
                width: 100%;
                img{
                    width: 100%;
                }
            }
            .under{
                font-size: 12px;
                color: #9c9c9c;
            }
        }
}
.myspace .readed{
    width: 90%;
    margin: 0 auto;
    display: flex;
    
    .his{
        width: 20%;
        height: 40px;
        line-height: 40px;
        margin-right: 20px;
        &.con{
            border-bottom: #ffe120 2px solid;
        }
    }
    .watch{
        width: 20%;
        height: 40px;
        line-height: 40px;
        &.con{
            border-bottom: #ffe120 2px solid;
        }
    }
}
.myspace .msg{
    width: 100%;
    background-color: #ffe120;
    height: 140px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    margin-bottom: 60px;
    .kkb{
        width: 84%;
        position: absolute;
        height: 60px;
        background-color: #fff;
        border-radius: 10px;
        left: 8%;
        bottom: -30px;
        display: flex;
        .one{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            // border-right: 1px solid #dfdfdf;
            svg{
                width: 18px;
                height: 18px;
                margin-right: 6px;
            }
            font-size: 14px;
            line-height: 60px;
        }
        .two{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            // border-left: 1px solid #dfdfdf;
            svg{
                width: 18px;
                height: 18px;
                margin-right: 6px;
            }
            font-size: 14px;
            line-height: 60px;
        }
    }
    .userpc{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 20px;
        img{
            width: 100%;
        }
    }
    .username{
        font-size: 26px;
        margin-left: 20px;
        font-weight: bold;
    }
    .other{
        svg{
            width: 20px;
            height: 20px;
        }
    }
}
.myspace .header{
    width: 100%;
    height: 50px;
    background-color: #ffe120;
    border-bottom: #fff;
    display: flex;
    align-items: center;
    
    svg{
        width: 20px;
        margin-left: 18px;
        height: 20px;
    }
}
</style>